<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/9/12
  Time: 8:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
</head>
<link rel="stylesheet" href="/css/logins.css">
<body>
<div class="root">
    <h1>图书管理系统</h1>
    <div class="btn">
        <button onclick="changeUser()">用户登录</button>
        <button onclick="changeAdmin()">管理员登录</button>
    </div>
    <div class="box1" id="user">
        <form action="${pageContext.request.contextPath }/login" method="post">
            <label>账&ensp;&ensp;号：</label>
            <input type="text" name="user_name" placeholder="请输入账号">
            <br>
            <label>密&ensp;&ensp;码：</label>
            <input type="password" name="password" placeholder="请输入密码">
            <br>
            <%--    验证码    --%>
            <img class="img" id="img1" src="${pageContext.request.contextPath }/verificationCode.do" style="margin-left: -20px"
                 onclick="changeImg()">
            <input id="code1" type="text" placeholder="输入验证码" >
            <br>
            <input style="background-color: deepskyblue;color: aliceblue" type="submit" value="登录"
                   onclick="return checkVerificationCodeCode1()">
            <%--        <input type="submit" value="登录" onclick="">--%>
            <br>
        </form>
        <a href="/toRegister">
            <button style="font-weight: lighter">还未注册？ 去注册！</button>
        </a>
        <br>
    </div>
    <div class="box1" id="admin">
        <form action="${pageContext.request.contextPath }/adminLogin" method="post">
            <label>账&ensp;&ensp;号：</label>
            <input type="text" name="name" placeholder="请输入账号">
            <br>
            <label>密&ensp;&ensp;码：</label>
            <input type="password" name="password" placeholder="请输入密码">
            <br>
            <%--    验证码    --%>
            <img class="img" id="img2" src="${pageContext.request.contextPath }/verificationCode.do" style="margin-left: -20px"
                 onclick="changeImg()">
            <input id="code2" type="text" placeholder="输入验证码">
            <br>
            <input style="color: aliceblue;background-color: orange" type="submit" value="登录" onclick="return checkVerificationCodeCode()">
            <br>
        </form>
    </div>
</div>
<script>

    function changeImg() {
        let img = document.querySelector("#img1")
        let img2 = document.querySelector("#img2")

        img.src = "${pageContext.request.contextPath }/verificationCode.do?date=" + new Date();
        img2.src = "${pageContext.request.contextPath }/verificationCode.do?date=" + new Date();

    }

    //获取cookie中的验证码
    function getCookie(cookie_name) {
        let allCookies = document.cookie;
        let cookie_pos = allCookies.indexOf(cookie_name);
        if (cookie_pos != -1) {
            cookie_pos += cookie_name.length + 1;
            let cookie_end = allCookies.indexOf(";", cookie_pos);
            if (cookie_end == -1) {
                cookie_end = allCookies.length;
            }
            return unescape(allCookies.substring(cookie_pos, cookie_end));
        }
        return null;
    }

    //验证输入的验证码是否正确
    function checkVerificationCodeCode1() {
        let v = document.querySelector("#code1")
        if (getCookie("v_c_v") == v.value) {
            return true;
        } else {
            alert("验证码错误！");
            return false;
        }
    } function checkVerificationCodeCode2() {
        let v = document.querySelector("#code2")
        if (getCookie("v_c_v") == v.value) {
            return true;
        } else {
            alert("验证码错误！");
            return false;
        }
    }

    function changeUser() {
        let user = document.querySelector("#user")
        let admin = document.querySelector("#admin")
        user.style.display = "block"
        admin.style.display = "none"

    }

    function changeAdmin() {
        let user = document.querySelector("#user")
        let admin = document.querySelector("#admin")
        user.style.display = "none"
        admin.style.display = "block"

    }

</script>
</body>
</html>
